<script setup lang="ts" >
import { CountUp } from 'countup.js'
import { ref, onMounted } from 'vue'
import {  useRouter, useRoute } from 'vue-router'
const props = defineProps({
    data: {
        type: Object,
        required: true,
    }
})
const totalCountTarget = ref()
const city1 = ref()
const city2 = ref()
const city3 = ref()
const city4 = ref()
const city5 = ref()
const city6 = ref()
onMounted(() => {
    new CountUp(totalCountTarget.value, props.data.total).start()
    new CountUp(city1.value, props.data.hb).start()
    new CountUp(city2.value, props.data.db).start()
    new CountUp(city3.value, props.data.hd).start()
    new CountUp(city4.value, props.data.zn).start()
    new CountUp(city5.value, props.data.xn).start()
    new CountUp(city6.value, props.data.xb).start()
})
//返回首页
const router=useRouter()
// const route=useRoute()
// console.log(route);
// console.log(router);
const 	backhome =()=>{
    router.back()
    
      }
</script>

<template>
    <div class="total-warpped">
        <div class="top">
            <div class="total">
                <el-button type="primary"  @click="backhome" class="homecss">首页</el-button>
                数据总量：<span class="title" ref="totalCountTarget">0</span> 条
            </div>
        </div>
        <div class="bottom ">
            <div class="bottom-top">
                <div class="hb">
                    华北：
                    <span class="title" ref="city1">
                        8,778,988
                    </span>
                </div>
                <div class="hb">
                    华北：
                    <span class="title" ref="city2">
                        8,778,988
                    </span>
                </div>
                <div class="hb">
                    华北：
                    <span class="title" ref="city3">
                        8,778,988
                    </span>
                </div>
            </div>
            <div class="bottom-btm">
                <div class="hb">
                    华北：
                    <span class="title" ref="city4">
                        8,778,988
                    </span>
                </div>
                <div class="hb">
                    华北：
                    <span class="title" ref="city5">
                        8,778,988
                    </span>
                </div>
                <div class="hb">
                    华北：
                    <span class="title" ref="city6">
                        8,778,988
                    </span>
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped lang="scss">
@font-face {
    font-family: 'Electronic';
    src: url('@/assets/fonts/FX-LED.ttf') format('truetype');
}
.title {
    font-family: 'Electronic';
    font-size: 1.5em;
    /* 背景渐变 */
    background: linear-gradient(180deg, #DC2424 0%, #4A569D 100%);
    /* 元素背景延伸到文本 */
    -webkit-background-clip: text;
    /* 文本字符填充颜色透明 ,让文字透明，就能填充上*/
    -webkit-text-fill-color: transparent;

}

.total-warpped {
    display: flex;
    flex-direction: column;
    color: #f3a647;
    font-weight: 500;

    .top {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2em;

        .total {
            font-size: 1.2em;
            .homecss{
                background-color: #eeb295;
                margin-right: 2em;
            }
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        margin-top: 2em;
        align-items: stretch;

        .bottom-top {
            display: flex;
            justify-content: space-around;
            height: 4em;
        }

        .bottom-btm {
            display: flex;
            justify-content: space-around;
        }

    }
}
</style>